<template lang="pug">
.administrators
  .top-list
    el-input(v-model="username" placeholder="请输入内容" clearable @clear="onSea")
    el-button(type="primary" size="mini" @click="onSea") 查找
    el-button(type="primary" size="mini" @click="show=true" v-p="['admin.user.create']") 添加
    el-button(type="warning" size="mini") 导出
  .bottom-list
    .adminList
      el-table(:data="tableData" border style="width: 100%")
        el-table-column(prop="id" label="管理员ID")
        el-table-column(prop="username" label="管理员名称")
        el-table-column(label="管理员头像")
          template(slot-scope="scope")
            img(slot="reference" :src="scope.row.avatar" style="width: 30px;height: 30px")
        el-table-column(label="管理员角色")
          template(slot-scope="scope")
            .role_names(v-for='d in scope.row.role_names')
              el-button(type="primary" plain size="mini") {{d}}
        el-table-column(prop="mail" label="邮箱")
        el-table-column(prop="tel" label="练习手机")
        el-table-column(label="操作")
          template(slot-scope="scope")
            el-button(type="primary" size="mini" @click="onedit(scope.row)" v-p="['admin.user.update']") 编辑
            el-button(type="danger" size="mini" @click="onDel(scope.row.id)" v-p="['admin.user.delete']") 删除
            el-button(type="primary" size="mini" @click="onPass(scope.row)" v-p="['admin.user.password']") 重置密码
      el-pagination(
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page+1" :page-sizes="[5, 10, 20, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total")
    admin-add(v-model="show" :role="role" @confirm="getList")
    reset-box(v-model="resetShow" :roles="roles")
</template>
<script>
import adminAdd from '@/views/admin/adminAdd.vue'
import ResetBox from '@/views/admin/ResetBox.vue'
export default {
  components: {
    adminAdd,
    ResetBox
  },
  data() {
    return {
      tableData:[],
      total:0,
      page:0,
      limit:5,
      username:'',
      show:false,
      role:{},
      resetShow:false,
      roles:{}
    }
  },
  created() {
    this.data()
  },
  methods: {
    data() {
      const {page,limit,username} = this;
      this.axios.get('/user/list',{
        params:{
          page,limit,username
        }
      }).then(({data}) => {
      console.log(data);
      this.tableData = data.data.list
      this.total = data.data.total
    })
    },
    // 重置密码
    onPass(row) {
      console.log(row);
      this.resetShow = true
      this.roles = row
    },
    // 查找
    onSea() {
      this.data()
    },
    // 编辑
    onedit(row) {
      this.show = true
      this.role = row
    },
    getList() {
      this.username = '',
      this.page = 0
      this.data()
    },
    // 删除
    onDel(id) {
      console.log(id);
      this.axios.post('/user/delete',{id}).then(({data}) => {
        if(!data.errcode) {
          this.$confirm('此操作将永久删除该文件，是否继续？','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type:'success',
              message: '删除成功'
            })
          }).catch(() => {
            this.$message({
              type:"info",
              message:'已取消删除'
            })
          })
          this.data()
        }
      })
    },
    handleSizeChange(size) {
      console.log(size);
      this.limit = size;
      this.pageNo = 0;
      this.data()
    },
    handleCurrentChange(page) {
      console.log(page);
      this.page = page-1;
      this.data()
    }
  },
}
</script>
<style lang="sass">

</style>
